
<template>
  <div class="select-template-page">
    <el-dialog class="select-template-main" :close-on-click-modal="false" :visible.sync="visible" title="选择模板" fullscreen center :before-close="handleCancel">
      <el-row v-loading="listLoading" :gutter="20" class="select-template-page-main">
        <el-radio-group v-model="selected">
          <el-col v-for="item in list" :key="item.name" :span="6">
            <div class="select-template-item" :style="{'border-color': selected === item.name ? theme : '#e5e5e5'}">
              <el-tooltip class="item" effect="dark" content="点击查看详情" placement="top">
                <el-image :src="getImagePath(item.templateContent)" @click="handlePreview(item.templateContent)">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
              </el-tooltip>
              <div class="template-select">
                <el-radio :label="item.id">{{ item.templateName }}</el-radio>
              </div>
            </div>
          </el-col>
        </el-radio-group>
      </el-row>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="handleCancel()">关 闭</el-button>
        <el-button style="padding: 8px 30px;" type="primary" @click="handleComit()">确认</el-button>
      </div>
    </el-dialog>
    <el-dialog class="template-preview" :close-on-click-modal="false" :visible.sync="visiblePreivew" title="预览" width="50%" center>
      <el-row v-for="(item, index) in previewItem" :key="index">
        <el-col :span="24">名称：<strong>{{ item.name }}</strong></el-col>
        <el-col :span="24">
          <p>内容：</p>
          <el-image v-if="item.type === 0" :src="view + item.content">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" />
            </div>
          </el-image>
          <strong v-else>{{ item.content }}</strong>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="visiblePreivew = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { mapGetters } from 'vuex'
import { queryPage } from './api'
export default {
  name: 'Index',
  components: { Pagination },
  props: {
    visible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      list: [],
      listLoading: false,
      total: 0,
      listQuery: {
        page: 1,
        limit: 30
      },
      selected: '',
      view: '/API-DOCUMENT/document/file/download?id=',
      visiblePreivew: false,
      previewItem: ''
    }
  },
  created() {
    this.getList()
  },
  computed: {
    ...mapGetters([
      'theme'
    ])
  },
  methods: {
    handlePreview(json) {
      try {
        this.previewItem = JSON.parse(json)
        this.visiblePreivew = true
      } catch (err) {
        this.previewItem = ''
        this.visiblePreivew = false
        this.$message({
          title: '提示',
          message: '模板数据错误，请重试。',
          type: 'error',
          duration: 1500
        })
      }
    },
    /**
     * 获取模板中的第一张图片地址
     * @param json
     */
    getImagePath(json) {
      try {
        const tempInfo = JSON.parse(json)
        if (tempInfo.length > 0) {
          return this.view + tempInfo[0].content
        } else {
          return ''
        }
      } catch (err) {
        return ''
      }
    },
    handleComit() {
      if (!this.selected) {
        this.$message({
          title: '提示',
          message: '请选择模板',
          type: 'error',
          duration: 1500
        })
        return
      }
      const selected = this.list.find(item => { return item.id === this.selected })
      this.$emit('select', selected.templateContent)
    },
    handleCancel() {
      this.$emit('update:visible', false)
    },
    getList(obj) {
      this.listLoading = true
      var query = {
        templateBaseType: 'MBK_FLZQ',
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit
      }
      return new Promise((resolve, reject) => {
        queryPage(query).then(response => {
          this.list = response.data.data.rows
          this.total = response.data.data.total
          this.listLoading = false
        }).catch(error => {
          reject(error)
          this.listLoading = false
        })
      })
    }
  }
}
</script>

<style lang="scss">
.select-template-page{
  position: relative;
  .el-dialog__body {
    max-height: calc(100vh - 109px);
    min-height: calc(100vh - 109px);
    overflow: auto;
    .select-template-page-main{
      padding: 10px;
      .el-radio-group{
        width: 100%;
      }
      .select-template-item{
        border: 1px solid #e5e5e5;
        margin-bottom: 10px;
        padding: 10px;
        .template-select{
          margin-top: 10px;
        }
      }
    }
  }
  .template-preview{
    .el-row{
      margin-bottom: 20px;
    }
    img{
      width: 70%;
    }
  }
}
</style>
